<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
    <script src="../script/jquery-1.10.min.js"></script>
</head>
<script>
    $(document).ready(function () {
        $(".row").css("border", "2px solid #f40");
        $("h5").css("border", " 2px solid #ccc");
        $(".form-group").css("border", " 2px solid green")
    })
</script>
<body>

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <h2>ol 有序列表</h2>
            <h5> type=1,a,A,i,I 排序方式 i罗马数字<br>还有reversed<br>start从每几个开始排 </h5>
            <ol type="A" reversed="reversed" start="2">
                <li>a</li>
                <li>b</li>
                <li>c</li>
            </ol>
        </div>
        <div class="col-sm-3">
            <h2>ul 无序列表</h2>
            <h5> type= 前面黑点的样式</h5>
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <h2>img</h2>
            <h5> title 鼠标图片提示，alt 图片不能打开时的文字提示 </h5>
            <img src="dd" title="abc" alt="这是alt">
        </div>
        <div class="col-sm-3">
            <h2>select</h2>
            <h5> select 是提交key,value是提交的数据 </h5>
            <select name="fruit">
                <option value="apple">apple</option>
                <option value="orange">orange</option>
            </select>
        </div>
        <div class="col-sm-3">
            <h2>a</h2>
            <h5>
                <ol id="cola_ul" type="1">
                    <li>target _blank 新页打开， _self本页</li>
                    <li style="font-weight: bold">href 跳转锚点， 跳转到 "#id"</li>
                    <li>:mailto :tel 等</li>
                    <li>运行javascript代码，</li>
                    <script>
                        $("#cola_ul li").css("font-weight", "bold")
                    </script>
                </ol>
            </h5>

            <a href="http://www.baidu.com" target="_self">打开百度</a><br>
            <a href="javascript:alert('这里是警告')" target="_self">运行javascript</a>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <h2>form</h2>
            <h5 style="font-weight: bold"> method=get post </h5>
            <h5>type是 input框类型; name是 提交时的key </h5>
            <form>
                <p>type input <input type="text" placeholder="please input text" name="username"></p>
                <p>input password<input type="password"></p>
                <div class="form-group">
                    <p>单选用 name区分同一个key,提交到后台的是value的属性值,默认选中checked</p>
                    <p>男<input type="radio" name="a" value="man" checked="checked"></p>
                    <p>女<input type="radio" name="a" value="woman"></p>
                </div>
                <div class="form-group">
                    <p>input 聚集 失焦事件<input onblur="alert('onfocus onblur')"></p>
                </div>
                <div class="form-group">
                    <p>多选 <input type="checkbox" name="a" value="1"></p>
                    <p>多选 <input type="checkbox" name="a" value="1"></p>
                    <p>多选 <input type="checkbox" name="a" value="1"></p>

                </div>
                <p>input submit <input type="submit" value="提交"></p>

            </form>
        </div>
    </div>
</div>

</body>
</html>